<template>
  <div>
    <hs-breadcrumb :breadcrumb="breadcrumb"></hs-breadcrumb>

    <Card :bordered="false" :style="{ marginBottom: '10px' }">
      <!--标题-->
      <div slot="title">
        <div class="hs-screen-box">
          <div>菜单列表</div>
          <div>
            <ButtonGroup>
              <Button @click="findPermissionList">
                <Icon type="md-refresh" size="15" />
              </Button>
              <Button @click="showAdminOpe(2)">新增菜单</Button>
            </ButtonGroup>
          </div>
        </div>
      </div>
      <!--表格数据-->
      <Table
        :columns="columns"
        :data="data"
        size="small"
        :stripe="true"
        :loading="isTableLoading"
        row-key="adminPermissionId"
      >
        <template slot-scope="{ row }" slot="action">
          <Button
            type="success"
            size="small"
            style="margin-right: 5px"
            @click="showAdminOpe(1, row)"
          >
            查看
          </Button>
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            @click="showAdminOpe(3, row)"
          >
            编辑
          </Button>

          <Dropdown transfer trigger="click">
            <Button size="small">
              <Icon type="ios-more" size="22" />
            </Button>
            <DropdownMenu slot="list">
              <DropdownItem @click.native="isDelPermission(row)">
                删除
              </DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </template>
      </Table>
    </Card>
    <!--菜单操作-->
    <permission-ope
      ref="permissionOpe"
      @changeDate="findPermissionList"
    ></permission-ope>
  </div>
</template>

<script>
  import hsBreadcrumb from '@/components/hs-breadcrumb';
  import permissionOpe from './components/permission-ope';

  export default {
    name: 'permission',
    data() {
      return {
        total: 0,
        isTableLoading: false,
        params: {
          roleName: ''
        },
        // 表格列
        columns: [
          {
            type: 'index',
            width: 100,
            align: 'center'
          },
          {
            title: '名称',
            minWidth: 120,
            key: 'permissionName',
            tree: true
          },
          {
            title: 'ID',
            minWidth: 120,
            key: 'adminPermissionId'
          },
          {
            title: 'URL',
            minWidth: 120,
            key: 'permissionUrl'
          },
          {
            title: '父级ID',
            key: 'parentId',
            width: 150
          },
          {
            title: '排序',
            key: 'permissionIndex',
            width: 150
          },
          {
            title: '级别',
            key: 'level',
            width: 150
          },
          {
            title: '操作',
            slot: 'action',
            width: 180,
            align: 'center'
          }
        ],
        // 表格数据
        data: [],
        // 面包屑
        breadcrumb: [
          { name: '首页', url: '', icon: 'ios-home-outline', size: 18 },
          { name: '系统管理', url: '', icon: '', size: 0 },
          { name: '菜单', url: '', icon: '', size: 0 }
        ]
      };
    },
    created() {
      // 管理员-菜单列表查询
      this.findPermissionList();
    },
    methods: {
      formatterRoutes(routes, parentId) {
        let result = [];
        for (let index = 0; index < routes.length; index++) {
          const element = routes[index];
          if (
            element.parentId == '' ||
            element.parentId == null ||
            element.parentId == undefined
          ) {
            element.parentId = '';
          }
          if (element.parentId == parentId) {
            element.children = this.formatterRoutes(
              routes,
              element.adminPermissionId
            );
            console.log(element.children.map(item => item.adminPermissionId));
            result.push(element);
          }
        }
        return result;
      },

      // 管理员-菜单列表查询
      findPermissionList() {
        this.isTableLoading = true;
        this.axios.post('/adminPermission/findPermissionList', {}).then(res => {
          this.isTableLoading = false;
          if (res.status == 200) {
            console.log(res.data);
            const routes = this.formatterRoutes(res.data, '');
            console.log(routes);
            // this.data = res.data;
            this.data = routes;
          }
          if (res.status == 500) {
            this.$Notice.error({
              title: '服务器内部错误',
              desc: '菜单列表查询接口报错',
              duration: 0
            });
          }
        });
      },
      // 显示操作模态框
      showAdminOpe(type, row) {
        /**
         * type判断
         * 1.查看 2.新增 3.编辑
         */
        this.$refs.permissionOpe.show(type, row);
      },
      // 是否删除菜单
      isDelPermission(row) {
        console.log(row);
        this.$Modal.confirm({
          title: `是否删除菜单-${row.permissionName}？`,
          onOk: () => {
            // this.$Message.info('您点击了确定.');
            this.roleDelete(row);
          },
          onCancel: () => {
            this.$Message.info('您点击了取消.');
          }
        });
      },
      // 删除菜单
      roleDelete(row) {
        this.$Spin.show();
        this.axios
          .post('/adminPermission/delete', {
            permissionId: row.adminPermissionId
          })
          .then(res => {
            setTimeout(() => {
              this.$Spin.hide();
            }, 300);
            if (res.status == 200) {
              this.$Message.success('操作成功.');
              this.findPermissionList();
            }
            if (res.status == 201) {
              // this.$Message.error(res.msg);
              this.$Notice.error({
                title: '删除菜单失败',
                desc: res.msg
              });
            }
            if (res.status == 500) {
              this.$Notice.error({
                title: '服务器内部错误',
                desc: '删除菜单接口报错',
                duration: 0
              });
            }
          });
      },
      // 重置筛选条件
      resetScreen() {
        this.params.roleName = '';
      }
    },
    components: {
      hsBreadcrumb,
      permissionOpe
    }
  };
</script>

<style scoped></style>
